<template>
    <section>
        <el-collapse accordion v-model="activeName" @change="getReply">
            <template v-for="video in videos">
                <el-collapse-item :name="video.videoId">
                    <template slot="title">
                        <span>{{video.videoName}}</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </template>
                    <template v-for="(studentQuiz,index) in studentQuizs">
                        <el-row>
                            <el-col :span="22">学生{{studentQuiz.studentId}}提问:&nbsp;{{studentQuiz.quizContent}}</el-col>
                            <el-col :span="2">{{studentQuiz.quizDateStr}}</el-col>
                        </el-row>
                        <el-row v-for="teacherReply in studentQuiz.teacherReplyModels">
                            <el-col :span="22">
                                &nbsp;&nbsp;&nbsp;&nbsp;你回复学生{{studentQuiz.studentId}}：  {{teacherReply.replyContent}}
                            </el-col>
                            <el-col :span="2">{{teacherReply.replyTimeStr}}</el-col>
                        </el-row>

                        <el-row>
                            <el-col :offset="22" :span="2">
                                <el-button @click="replyEnable(index)" type="primary">回复</el-button>
                            </el-col>
                        </el-row>
                        <el-row v-if="replyShow[index]">
                            <el-col :span="24">
                                <el-input v-model="replyContent" placeholder="请输入回复内容">
                                    <el-button slot="append" @click="teacherReply(studentQuiz.quizId,index)" icon="check">发表</el-button>
                                </el-input>
                            </el-col>
                        </el-row>
                    </template>
                </el-collapse-item>
            </template>
        </el-collapse>

        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :page-sizes="[15,20,25,30]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </section>
</template>
<script>
    import {getVideos, getStudentQuizByVideoId,addTeacherReply} from '../../api/api'
    export default{
        data() {
            return {
                currentPage: 1,
                pageSize: 15,
                total: 0,
                videos: [],
                studentQuizs: [],
                activeName: '',
                replyShow: [],
                replyContent:''
            }
        },

        /**
         * 加载完后执行
         */
        mounted(){
            this.searchVideos();
        },
        methods: {
            searchVideos(){
                let params = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                };
                getVideos(params).then(res => {
                    if (res.resCode == 0) {
                        this.total = res.resData.total;
                        this.videos = res.resData.list;
                    }
                });
            },
            handleSizeChange(pageSize){
                this.pageSize = pageSize;
                this.searchVideos();
            },
            handleCurrentChange(currentPage){
                this.currentPage = currentPage;
                this.searchVideos();
            },
            getReply(activeName){
                if (activeName != "") {
                    let param = {
                        videoId: this.activeName
                    }
                    getStudentQuizByVideoId(param).then(res => {
                        this.studentQuizs = res.resData;
                    });
                }
            },
            teacherReply(quizId,index){
                if(this.replyContent!=''){
                    this.replyEnable(index);
                    let param = {
                        quizid: quizId,
                        replyContent:this.replyContent
                    };

                    addTeacherReply(param).then(res => {
                        if(res.resCode==0){
                            this.getReply(this.activeName);
                        }
                        else{
                            this.$message({
                                type:'error',
                                message:"发生异常"
                            });
                        }
                    });
                }
            },
            replyEnable(index){
                if (this.replyShow[index] != true) {
                    this.replyShow.splice(index, 1, true);//直接=改变值不能触发Vue的渲染
                }
                else {
                    this.replyShow.splice(index, 1, false);
                }

            }

        }
    }
</script>